<template>
  <div>
    <!-- 头部 -->
    <Header></Header>
    <van-sticky>
      <van-nav-bar
        title="资讯详情"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
        right-text="返回顶部"
        @click-right="onClickright"
      />
    </van-sticky>

    <div class="list">
      <!-- 轮播图 -->
      <div class="slideshow">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item v-for="(item, i) in thumimages" :key="i">
            <van-image width="100%" :src="item.src" />
          </van-swipe-item>
        </van-swipe>
      </div>
      <div class="main">
        <div class="main-hd">
          {{ goods_info.title }}
        </div>
        <div class="main-bd">
          <div class="main-bd-item1">
            <div class="main-bd-item-left">
              <span class="bazaar">市场价:</span>
              <em>￥{{ goods_info.market_price }}</em>
            </div>
            <div class="main-bd-item-right">
              <span class="sell">销售价:</span>
              <span class="price">￥{{ goods_info.sell_price }}</span>
            </div>
          </div>
          <div class="main-bd-item2">
            <span>购买数量</span>
            <van-stepper v-model="val" />
          </div>
          <div class="main-bd-item3">
            <van-button size="small" type="info">立即购买</van-button>
            <van-button
              size="small"
              type="danger"
              @click="Add"
              :disabled="disabled"
              >加入购物车</van-button
            >
          </div>
        </div>
      </div>
      <div class="center">
        <div class="center-hd">
          <p>商品参数</p>
        </div>
        <div class="center-bd">
          <p>商品货号：{{ goods_info.goods_no }}</p>
          <p>库存情况：{{ goods_info.stock_quantity }}</p>
          <p>上架时间：{{ goods_info.add_time | fromdata }}</p>
        </div>
      </div>
      <van-button
        class="btn"
        plain
        type="info"
        @click="$router.push(`/Shop_desc/${$route.params.id}`)"
        >图文介绍</van-button
      >
      <van-button
        class="btn"
        plain
        type="danger"
        @click="$router.push(`/comment/${$route.params.id}`)"
        >商品评论</van-button
      >
    </div>
  </div>
</template>

<script>
// 引入vuex
import { mapState, mapMutations } from "vuex";
import { getthumimages } from "../api";
import { getinfo } from "../api/goods";

import Header from "../components/header.vue";

export default {
  async created() {
    // 商品参数接口
    const { data: res } = await getinfo(this.$route.params.id);

    this.goods_info = res.message[0];
    // console.log(this.goods_info);

    const { data: res1 } = await getthumimages(this.$route.params.id);
    // console.log(res1);
    // 轮播图图片接口
    this.thumimages = res1.message;
    // 拿到最新的值  只要第一个满足就返回
    this.val = this.$store.state.catadata.find((item) => {
      return item.id == this.$route.params.id;
    }).val;
    this.add(this.$store.state.catadata);
  },

  components: {
    Header,
  },
  data() {
    return {
      disabled: false,
      val: 1,
      goods_info: {}, //商品参数
      thumimages: [], //图片路径
      catalist: JSON.parse(localStorage.getItem("catid")) || [], //保存数据用
    };
  },
  methods: {
    // 要用到共有方法
    ...mapMutations(["add", "catadata", "addcat", "subcat"]),
    onClickLeft() {
      this.$router.go(-1);
    },
    onClickright() {
      //   console.log(1);
      window.scrollTo({
        top: 0,
        behavior: "smooth",
      });
    },

    Add() {
      // 计算

      // 控制按钮
      this.disabled = true;
      let catnum = { id: this.$route.params.id, val: this.val };
      // 如果长度为0  追加数据
      if (this.catalist.length == 0) {
        this.catalist = [catnum];
      }
      // 如果长度不为0
      if (this.catalist.length !== 0) {
        // 只要有一个为true则为true
        let res = this.catalist.some((item) => {
          return item.id == this.$route.params.id;
        });
        // 证明有重复的
        if (res) {
          // 把id重复的过滤出来
          this.catalist = this.catalist.filter(
            (item) => item.id !== this.$route.params.id
          );

          // 在把最新的数据追加
          this.catalist.unshift(catnum);
        } else {
          // 证明没有id就push
          this.catalist.push(catnum);
        }
      }
    },
  },
  watch: {
    // 只要值改变，按钮就打开
    val() {
      this.disabled = false;
    },

    catalist: {
      deep: true,
      handler() {
        localStorage.setItem("catid", JSON.stringify(this.catalist));
        // 🐱‍🏍🐱‍🏍必须小心异步   保存到本地  然后在渲染
        this.add(JSON.parse(localStorage.getItem("catid")));
      },
    },
    comments: {
      // 要用到公共属性
      ...mapState(["num"]),
    },
  },
};
</script>

<style lang="less" scoped>
.hd {
  height: 50px;
  background-color: #26a2ff;
  color: #fff;
  display: flex;
  align-items: center;
  div {
    font-size: 20px;
    font-weight: 700;
  }
  p {
    font-size: 16px;
    flex: 1;
    display: flex;
    justify-content: center;
  }
}
.slideshow {
  height: 250px;

  margin: 0 5px 5px;
  border: 1px solid #d2d2d2;
  border-radius: 5px;
  .van-image {
    height: 250px;
  }
}
.list {
  .main {
    margin: 0 5px;
    padding: 0 10px;
    border: 1px solid #d2d2d2;
    border-radius: 5px;
    .main-hd {
      font-size: 22px;
      font-weight: 700;
      color: #294657;
      padding: 10px 0;
      border-bottom: 1px solid #ccc;
    }

    .main-bd {
      .main-bd-item1 {
        display: flex;

        padding: 10px 0;
        align-items: center;
        .main-bd-item-left {
          .bazaar {
            padding-right: 10px;
          }

          em {
            text-decoration: line-through;
          }
        }

        .main-bd-item-right {
          margin-left: 30px;
          .sell {
            padding-right: 10px;
          }

          .price {
            color: red;
            font-size: 20px;
          }
        }
      }

      .main-bd-item2 {
        display: flex;
        align-items: center;
        margin: 5px 0;
        span {
        }

        .van-stepper {
          margin-left: 30px;
        }
      }

      .main-bd-item3 {
        margin: 5px;
        .van-button {
          margin: 0 5px 10px;
        }
      }
    }
  }

  .center {
    margin: 5px;
    padding: 0 10px;
    border: 1px solid #d2d2d2;
    border-radius: 5px;
    .center-hd {
      padding: 10px 0;
      border-bottom: 1px solid #d2d2d2;
    }

    .center-bd {
      display: flex;
      flex-wrap: wrap;
      align-content: space-around;
      flex-direction: column;
      padding-bottom: 10px;
      font-size: 14px;
      p {
        padding: 5px;
      }
    }
  }
}
.btn {
  width: 95%;
  margin: 5px 10px;
}
/deep/.van-swipe__indicator {
  font-size: 20px;
  background-color: red;
}
</style>
